<script lang="ts" setup>
import { getAllBucketSize, getSse, listAllOssConfig } from '@/api/system/ossConfig';
import * as echarts from 'echarts';
import { EChartsOption } from 'echarts';
import { initSSE } from '@/utils/sse';
import { useSseStore } from '@/store/modules/sseStore';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const chartData = ref();
const chart = ref();
const myChart = ref();
const loading = ref(true);
const getList = async () => {
  // 如果存在已初始化的图表实例，则先销毁
  if (myChart.value) {
    myChart.value.dispose(); // 销毁当前的图表实例
  }
  loading.value = true;
  const res = (await listAllOssConfig(null)).data.filter(item => item.bucketSize > 0);
  loading.value = false;
  chartData.value = res.map(item => {
    return {
      value: item.bucketSize / (1024 ** 2),  // 将字节转换为兆字节
      bucketName: item.bucketName,
      name: item.configKey
    };
  });


  myChart.value = echarts.init(chart.value); // 重新初始化图表实例

  let option: EChartsOption;
  option = {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        const { name, value, data } = params;
        return `${name}<br/>大小 : ${Math.floor(value * 1000) / 1000} MB<br/>桶名称 : ${data.bucketName}`;
      }
    },
    legend: {
      orient: 'vertical',  // 设置图例垂直显示
      top: '5%',           // 设置图例顶部位置
      left: 'left',        // 设置图例显示在左侧
      formatter: (name) => {
        return name;
      },
      tooltip: {
        show: true
      }
    },
    series: [
      {
        name: '使用空间',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 20
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold',
            color: 'black',
            formatter: function(params: any) {
              const totalSize = chartData.value.reduce((acc, item) => acc + item.value, 0);
              const percent = Math.floor(params.value / totalSize * 100000) / 1000;
              return `{percent|${percent}%}\n{name|${params.name}}`;
            },
            rich: {
              percent: {
                fontSize: 30,
                fontFamily: 'KaiTi, 楷体',
                color: 'var(--menuBg)'
              },
              name: {
                fontSize: 14,
                color: 'var(--menuBg)'
              }
            }
          }
        },
        labelLine: {
          show: false
        },
        data: chartData.value
      }
    ]
  };

  myChart.value.resize(); // 调整图表大小
  option && myChart.value.setOption(option); // 设置图表选项

};

/* 刷新 */
const refresh = async () => {
  await getList(); // 调用获取数据的方法
};

/*获取OSS最新数据*/
const getBucketSize = async () => {
  loading.value = true;
  await getAllBucketSize();
};
const sseStore = useSseStore();

watch(() => sseStore.sseData, (newValue) => {
  // 在这里可以执行其他操作
  if (newValue === '已更新为最新数据') {
    getList();
    sseStore.setSSEData(null);
    loading.value = false;
  }
});

onMounted(async () => {
  await getList(); // 初始化时获取数据
});
</script>

<template>

  <a-card hoverable>
    <template #title>
      <a-flex align="center" justify="space-between">
        <div class="card-title">OSS空间使用概览</div>
        <a-flex gap="small">
          <el-tooltip content="点击刷新" placement="top">
            <el-button :loading="loading" circle icon="refresh" plain type="primary" @click="refresh()"></el-button>
          </el-tooltip>
          <el-tooltip content="获取最新数据" placement="top">
            <el-button :loading="loading" circle plain type="warning" @click="getBucketSize">
              <template #icon>
                <svg-icon icon-class="data" />
              </template>
            </el-button>
          </el-tooltip>
        </a-flex>
      </a-flex>
    </template>
    <a-spin :spinning="loading" size="large">
      <div ref="chart" style="height: 300px"></div>
    </a-spin>
  </a-card>


</template>

<style lang="scss" scoped>

</style>
